<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03姓名案例_计算属性语法</title>
		<script src="../../js/vue.js"></script>
		<style>

		</style>
	</head>
	<body>

		<!--
		 什么是属性？
		 在vue中，它认为是data中的数据（属性由属性名与属性值组成）
		 -->

		<!-- 
			计算属性:
			1.定义:基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
			2:语法
			  第一种：一个计算属性对应一个函数 也叫简写形式 只读不改  代码层面的简写
			  容易产生的误解：表面上是一个函数，其实往vm上放了一个属性(计算属性名),其值就是返回结果的值
				computed: {
					计算属性名() {
						一段代码逻辑(计算逻辑)
						return 结果
					}
				}
				第二种：完整的写法
				computed: {
					计算属性名: {
						get() {
							一段代码逻辑(计算逻辑)
							return 结果
						},
						set(修改的值) {
							代码的修改逻辑(修改逻辑)
						}
					}
				}
			  使用起来和普通属性一样使用 {{ 计算属性名}}
			3.原理:底层借助了Objcet.defineproperty方法提供的getter和setter.
			4.get是什么时候执行?
					(1)初次读取时会执行一次。
					(2)当依赖的数据发生改变时会被再次调用。
			5.优势:与methods实现相比，内部有缓存机制(复用），效率更高，调试方便。
			6.备注:
					1.计算属性最终会出现在vm上直接读取使用即可。
					2.如果计算属性要被修改，那必须写set函数去相应的修改，且set中要引起计算时依赖的数据发生改变
			7.注意
				computed配置项和data配置项是同级的
				computed中的计算属性虽然是函数的写法，但他依然是个属性
				computed中的计算属性不能和data中的属性同名
				使用computed中的计算属性和使用data中的属性是一样的用法
				computed中计算属性内部的this依然指向的是Vue实例
		    -->
		<div id="root">
			<h1>{{name}}</h1>
			姓:<input type="text" v-model="firstName"><br />
			名:<input type="text" v-model="lastName"><br />
			全名:<span>{{fullName}}</span><br /><br />
			全名:<span>{{fullName}}</span><br /><br />
			全名:<span>{{fullName}}</span><br /><br />
			全名:<span>{{fullName}}</span>
		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						name: '读书点点',
						firstName: '李',
						lastName: '四'
					}
				},
				methods: {},
				//计算属性
				computed: {
					//完整的写法
					fullName: {
						//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的值;
						//get什么时候调用？1.初次读取fullName的时候；2.所依赖的数据发生变化时;
						get() {
							console.log('get被调用了');
							return this.firstName + '~' + this.lastName;
						},
						set(value) {
							console.log(value);
							let arr = value.split('-');
							this.firstName = arr[0];
							this.lastName = arr[1];
						}
					}
				}
			});
		</script>
	</body>
</html>